<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-demo__dhgodsinfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="GodsName" placeholder="请输入物品名称进行查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getGodsDataListByGodsName()"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="checkAdminNewGodsVisible = true">上架新的物品(仅管理员可用)</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="checkAdminAddGodsVisible = true">补充物品库存(仅管理员可用)</el-button>
        </el-form-item>
      </el-form>
      <!--      上架新商品检查管理员身份-->
      <el-dialog title="请输入管理员密码" :visible.sync="checkAdminNewGodsVisible" width="30%">
        <el-input v-model="inputAdminPassword" placeholder="请输入密码" show-password></el-input>
        <template slot="footer" class="dialog-footer">
          <el-button @click="checkAdminNewGodsVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkAdminNewGods">确 定</el-button>
        </template>
      </el-dialog>
      <!--      补充商品库存检查管理员身份-->
      <el-dialog title="请输入管理员密码" :visible.sync="checkAdminAddGodsVisible" width="30%">
        <el-input v-model="inputAdminPassword" placeholder="请输入密码" show-password></el-input>
        <template slot="footer" class="dialog-footer">
          <el-button @click="checkAdminAddGodsVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkAdminAddGods">确 定</el-button>
        </template>
      </el-dialog>
      <!--      上架新商品弹出框-->
      <el-dialog :visible.sync="newGodsVisible" title="填写上架的新商品信息" width="30%">
        <el-form :model="newGodsDataForm" ref="dataForm" :label-width="'80px'">
          <el-form-item label="物品编号" prop="id">
            <el-input v-model="newGodsDataForm.id" placeholder="物品编号"></el-input>
          </el-form-item>
          <el-form-item label="物品名称" prop="godsName">
            <el-input v-model="newGodsDataForm.godsName" placeholder="物品名称"></el-input>
          </el-form-item>
          <el-form-item label="库存数量" prop="amount">
            <el-input-number v-model="newGodsDataForm.amount" :min="0" :step="10"></el-input-number>
          </el-form-item>
          <el-form-item label="租金" prop="rent">
            <el-input v-model="newGodsDataForm.rent" placeholder="租金"></el-input>
          </el-form-item>
          <el-form-item label="售价" prop="sellPrice">
            <el-input v-model="newGodsDataForm.sellPrice" placeholder="售价"></el-input>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button @click="newGodsVisible = false">{{ $t('cancel') }}</el-button>
          <el-button type="primary" @click="newGods">{{ $t('confirm') }}</el-button>
        </template>
      </el-dialog>
      <!--      增加商品库存弹出框-->
      <el-dialog :visible.sync="addGodsVisible" title="填写增加库存的商品信息" width="30%">
        <el-form :model="addGodsDataForm" ref="dataForm" :label-width="'80px'">
          <el-form-item label="物品编号" prop="id">
            <el-input v-model="addGodsDataForm.id" placeholder="物品编号"></el-input>
          </el-form-item>
          <el-form-item label="库存数量" prop="amount">
            <el-input-number v-model="addGodsDataForm.amount" :min="0" :step="10"></el-input-number>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button @click="addGodsVisible = false">{{ $t('cancel') }}</el-button>
          <el-button type="primary" @click="addGods">{{ $t('confirm') }}</el-button>
        </template>
      </el-dialog>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column prop="id" label="运动用品编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="godsName" label="物品名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="amount" label="库存数量" header-align="center" align="center"></el-table-column>
        <el-table-column prop="rent" label="租金/元" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sellPrice" label="售价/元" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="rent(scope.row.id,scope.row.rent)">租用</el-button>
            <el-button type="primary" size="small" @click="sell(scope.row.id,scope.row.sellPrice)">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dhgodsinfo-add-or-update'
import params from "@/views/modules/sys/params";

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/dhgodsinfo/page',
        getDataListIsPage: true,
        exportURL: '/demo/dhgodsinfo/export',
        deleteURL: '/demo/dhgodsinfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      GodsName: '',
      checkAdminNewGodsVisible: false,
      checkAdminAddGodsVisible: false,
      inputAdminPassword: '',
      AdminPassword: 'ADMIN12345678',
      newGodsVisible: false,
      newGodsDataForm: {
        id: '',
        godsName: '',
        amount: '',
        rent: '',
        sellPrice: ''
      },
      addGodsVisible: false,
      addGodsDataForm: {
        id: '',
        amount: ''
      }
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    /**
     * 通过运动物品名称查找指定物品
     */
    getGodsDataListByGodsName() {
      if (this.GodsName === '') {
        this.query()
      } else {
        this.$http.get('demo/dhgodsinfo/getGodsDataListByGodsName', {
          params: {
            godsName: this.GodsName
          }
        }).then(({data: res}) => {
          this.dataList = res.data;
        }).catch(_ => {
        })
      }
    },
    /**
     * 租用物品
     * @param id
     * @param rent
     */
    rent(id, rent) {
      if (rent === null) {
        this.$message({
          type: 'error',
          message: '此物品只能购买，无法租用。'
        })
      } else {
        this.$confirm('确认租用此物品？租用使用时间为七天。', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('demo/dhgodsinfo/rent', {
            id: id,
            userId: this.$store.state.user.id,
            rent: rent
          })
              .then(({data: res}) => {
                this.query();
                this.$message({
                  type: 'success',
                  message: '租用物品成功！请到器材库领取。'
                })
              })
        })
      }
    },
    /**
     * 购买物品
     * @param id
     * @param sellPrice
     */
    sell(id, sellPrice) {
      this.$confirm('确认购买此物品？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('demo/dhgodsinfo/sell', {
          id: id,
          userId: this.$store.state.user.id,
          sellPrice: sellPrice
        })
            .then(({data: res}) => {
              this.query();
              this.$message({
                type: 'success',
                message: '购买物品成功！请到器材库领取。'
              })
            })
      })
    },
    /**
     * 上架新商品检查管理员身份
     */
    checkAdminNewGods() {
      if (this.inputAdminPassword === this.AdminPassword) {
        this.checkAdminNewGodsVisible = false;
        this.newGodsVisible = true;
        this.inputAdminPassword = '';
      } else {
        this.checkAdminNewGodsVisible = false;
        this.inputAdminPassword = '';
        this.$message({
          type: 'error',
          message: '请输入正确的管理员密码!'
        })
      }
    },
    /**
     * 补充商品库存检查管理员身份
     */
    checkAdminAddGods() {
      if (this.inputAdminPassword === this.AdminPassword) {
        this.checkAdminAddGodsVisible = false;
        this.addGodsVisible = true;
        this.inputAdminPassword = '';
      } else {
        this.checkAdminAddGodsVisible = false;
        this.inputAdminPassword = '';
        this.$message({
          type: 'error',
          message: '请输入正确的管理员密码!'
        })
      }
    },
    /**
     * 上架新商品
     */
    newGods() {
      this.$http.post('demo/dhgodsinfo/newGods', {
        id: this.newGodsDataForm.id,
        godsName: this.newGodsDataForm.godsName,
        amount: this.newGodsDataForm.amount,
        rent: this.newGodsDataForm.rent,
        sellPrice: this.newGodsDataForm.sellPrice
      })
          .then(({data: res}) => {
            if (res.data === 1) {
              this.$message({
                type: 'success',
                message: '上架物品成功!'
              });
              this.newGodsVisible = false;
              this.query();
            }
          }).catch(_ => {
      })

    },
    /**
     * 补充商品库存
     */
    addGods() {
      this.$http.post('demo/dhgodsinfo/addGods', {
        id: this.addGodsDataForm.id,
        amount: this.addGodsDataForm.amount
      })
          .then(({data: res}) => {
            if (res.data === 1) {
              this.$message({
                type: 'success',
                message: '补充物品成功!'
              });
              this.addGodsVisible = false;
              this.query();
            }
          }).catch(_ => {
      })
    }
  }
}
</script>
